/**
 * Created by levy on 16/9/2.
 */
import {shopping} from "../const/shopping.js";
import RichText from "../components/RichText.js";
import Img from "../components/Img";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    ajax = lf.utils.ajax;

const goodsId = lf.utils.getUrlParam('goodsId');

/**
 * props:
 *  user
 */

const Root = RC({
    getInitialState() {
        return {
            itemDetail: {}, //商品基本信息
            defaultAddress: {}
        }
    },
    getItemDetail() {
        ajax({
            url: shopping.api.prefix + shopping.api.itemDetail,
            data: {
                goodsId: goodsId
            },
            success: (data) => {
                if (data.code != 200) alert('没有商品数据');
                else {
                    this.setState({itemDetail: data.data});

                    // data.data.goodsNumber ? this.getDefaultAddress() : null;
                    // todo 解决iphone6和一些手机ajax abort,但是小谢手机点击立即领取无法点击
                }
            }
        });
    },
    getDefaultAddress() {
        ajax({
            url: shopping.api.prefix + shopping.api.address.list,
            data: {
                custGlobalId: this.props.user.GlobalId,
                // userId: this.props.user.userId,
            }
        }, null, list => {
            list.map(data => {
                if (!parseInt(data.isDefault)) return;
                this.setState({
                    defaultAddress: data
                });
                ajax({
                    type: 'post',
                    url: shopping.api.prefix + shopping.api.order.create,
                    data: {
                        custGlobalId: this.props.user.GlobalId,
                        // userId: this.props.user.userId,
                        mobile: this.props.user.mobile,
                        addressId: this.state.defaultAddress.id,
                        goodsIdAndNum: `[{'goodsId': ${goodsId},'num': 1}]`,
                        isCart: 0,
                    },
                    success: function () {
                        $('.page-success').css({display: "block"}); //test 解决有时候创建不了订单
                    }.bind(this)
                });
            });
        })
        
    },
    show(){
        console.log(this.state.defaultAddress.id);
        let val = $('.input').val().replace(/\s+/g, "");
        
        if (this.state.itemDetail.keywords == val) {

            this.getDefaultAddress();

        } else {
            $('.page-success-to').css({display: "block"});
        }
    },
    componentWillMount() {
        this.getItemDetail();
    },
    tapFn(){
        $('#root').css({display: 'none'});

        if (lf.utils.getSys() == "IOS") {
            lf.bridgeJs.doClose();
        }
        lf.bridgeJs.callAppHandler('scanQRCode', null, function (data) {
            var url = data.result;
            // lf.appJs.doLocation(url, '猜灯谜');
            lf.appJs.doLocation(url, '领取大礼包');
        })
    },
    clickFn(){
        let locationUrl = location.origin;
        let url = locationUrl + '/zhwy-hybrid-static/activity/finger-guess-riddles.html',
        // title = '猜灯谜';
            title = '领取大礼包';
        lf.appJs.doLocation(url, title);
    },
    render() {
        let rename = true;//todo rename to gift;

        const data = this.state.itemDetail,
            imgStyle = {
                width: '100%',
                height: 'auto',
            };
        
        if (data.goodsNumber == 0) {
            lf.appJs.doLocation('invalid-scan.html?goodsId=' + goodsId, '无效二维码');
        } else {
            return <div className={"shopping item-detail " + (data.goodsNumber ? 'show' : '')}>
                <Img src={data.goodsImg ? lf.utils.getProtocol() + shopping.imgPre + data.goodsImg : ''}
                     style={{width: '100%',height:'3.75rem'}}/>
                <div className="container">
                    <p className="item-name">{data.goodsName || ''}</p>
                </div>
                <div className="img-detail split-line">
                    {
                        data.goodsDesc ?
                            <RichText text={data.goodsDesc}/>
                            :
                            <div className="row light-gray">暂无</div>
                    }
                    <div className="img-list after ele-hide">
                        <Img src={lf.imgUrl.none} style={imgStyle}/>
                    </div>
                </div>
                
                <div className="send-btns">
                    <ul>
                        <li><input type="text" className='input' placeholder="请输入答案"/></li>
                        <li>
                            <button disabled={this.state.disabled} type="submit" onClick={this.show}>确 认</button>
                        </li>
                    </ul>
                </div>
                <div className="page-success">
                    <div className="center-box">

                        <h3>{rename ? '领取成功啦!' : '太棒了！答对'}</h3>
                        <div className="icon-d icon-xiaolian"></div>
                        {
                            rename ? null : <ul className="check-btn">
                                <li onTouchEnd={this.tapFn}><a href="javascript:;">继续参加</a></li>
                                <li onTouchEnd={this.clickFn}><a href="javascript:;">立即领取</a></li>
                            </ul>
                        }

                    </div>
                </div>
                
                <div className="page-success-to">
                    <div className="center-box-to">
                        <h3>{rename ? '暗号不对!请输入【领取大礼包】' : '不要灰心，再接再励'}</h3>
                        <div className="icon-d icon-ku"></div>
                        <ul className="check-btn-to">
                            <li onTouchEnd={this.tapFn}><a href="javascript:;">重新参与</a></li>
                        </ul>
                    </div>
                </div>
            
            </div>
        }
        
        
    }
});

lf.appJs.getUser(function (user) {
    lf.appJs.setTitle('领取大礼包');
    R.render(<Root user={user}/>, document.getElementById('root'));
});



